<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<video class="video-full" :src="albumUrl" mode="aspectFill"></video>
	</view>
</template>

<script>
export default {
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			albumUrl: ''
		};
	},
	onLoad(option) {
		if(option && option.url){
			this.albumUrl = decodeURI(option.url)
		}
	},
	onShow() {},
	methods: {
		// 全屏播放事件
		fullscreenchange(e) {
			console.log('全屏---->', e.detail.fullScreen);
		},
		videoEnded() {
			console.log('videoEnded');
			if (this.dataIndex < this.dataList.length - 1) {
				this.dataIndex = this.dataIndex + 1;
			} else {
				this.dataIndex = 0;
			}
		},
		videoPlay() {
			console.log('videoPlay');
			this.videoContext.play(); //播放
			this.isPlay = true;
			// this.muted = false
		},
		videoPause() {
			this.videoContext.pause(); //暂停
			this.isPlay = false;
		},
		videoTap() {
			if (this.videoContext) {
				if (this.isPlay) {
					this.videoPause();
				} else {
					this.videoPlay();
				}
			}
			console.log('videoTap');
		},
		mutedChange() {
			this.muted = !this.muted;
		}
	}
};
</script>

<style lang="scss" scoped>
.video-full {
	width: 750rpx;
	height: calc(100vh);
	position: relative;
	z-index: 0;
}

.fixed-bottom {
	position: fixed;
	left: 0;
	bottom: 0;
	text-shadow: 0 2rpx rgba(0, 0, 0, 0.5);
}

.fixed-right {
	position: fixed;
	right: 32rpx;
	bottom: 300rpx;
	text-shadow: 0 2rpx rgba(0, 0, 0, 0.5);
}

.avatar {
	width: 100rpx;
	height: 100rpx;
	position: relative;
}

.attention {
	position: absolute;
	bottom: -18rpx;
	left: 50%;
	margin: 0 0 0 -18rpx;
	width: 36rpx;
	height: 36rpx;
	background-color: #111216;
	border-radius: 50%;
}
.avatar .inner {
	width: 100rpx;
	height: 100rpx;
	border: 2rpx solid #f7f9ff;
	border-radius: 50%;
}
</style>
